<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			
			div{
				
				text-align: center;
				width: 200px;
				height: 200px;
				border: 1px solid red;
				margin:20px;
				line-height:200px;
				background-color:green ;
			}
			
		</style>
	</head>
	<body>
		
		<div id="yd02">中国移动</div>
		<div id="lt">中国联通</div>
		
		
		<input type="button" onclick="changeYD();" value="RED" />
		
		
		<br/><br/><br/>
		活动：
		<input type="checkbox" checked="checked" value="1" name="hd" />唱歌
		<input type="checkbox" value="2" name="hd" />吃饭
		<input type="checkbox" checked="checked" value="3" name="hd" /> 斗地主
		
		
		<input type="button" onclick="chooseWhat();" value="chooseWhat" />
		
		
		
		
		
		<script>
		
			function chooseWhat(){
				//1 如果你要对谁进行操作。 首先你要获取谁
				var hds = document.getElementsByName('hd');
				console.log(hds.length);
				
				var result='';
				
				var counter=0;
				//2 如何得到选中? 遍历根据checked 把hds看作数组
				for(var index =0; index<hds.length;index++){
					var hd = hds[index];
					if(hd.checked){
						counter++;
						var v=hd.value;
						if(v == 1){
							v ='唱歌'
						}else if(v == 2){
							v ='吃饭'
						}else if(v ==3){
							v ='斗地主'
						}
						result = result + v;
					}
					console.log(index);
				}
				
				if(counter == 0){
					alert('你必须选择1个');
					//考察你牛不牛
					return false;
				}
				
				alert('活动：'+result);
				
				
				
				
			}
			function changeYD(){
				//先找到yd这个标签
				var yd = document.getElementById('yd02');
				
				/*background-color:green ;*/
				
				yd.style.backgroundColor='red';
			}
			
		</script>
	</body>
</html>
